<template>
  <ComDialog v-model="dialogVisible" title="新增">
    <ElementEasyForm ref="comFromRef" class="mt20" :formJson="formJson">
    </ElementEasyForm>
    <template #footer>
      <div>
        <el-button size="large" @click="handleClose">取消</el-button>
        <el-button
          size="large"
          :loading="subLoading"
          type="primary"
          @click="submitData"
          >保存</el-button
        >
      </div>
    </template>
  </ComDialog>
</template>

<script setup lang="tsx">
import { ElMessage } from "element-plus";
import { ref, reactive, defineEmits, onMounted, watch, shallowRef } from "vue";
import { addRecipeCategory ,getRecipeCategoryInfo,
updatRecipeCategory

} from "../api";
import { useI18n } from "vue-i18n";
const emit = defineEmits(["update:modelValue", "update"]);
const dialogVisible = shallowRef(false);
const subLoading = shallowRef(false);
const comFromRef = ref<any>();
const { t } = useI18n();

const submitData = async () => {
  try {
    const res = await comFromRef.value.validate();
    if (props.id) {
      updatRecipeCategory(res).then((resItem: any) => {
        ElMessage.success(t("操作成功"));
        handleClose();
        emit("update");
      });
    } else {
      addRecipeCategory(res).then((resItem: any) => {
        ElMessage.success(t("操作成功"));
        handleClose();
        emit("update");
      });
    }
  } catch (error) {
    console.log("error :>> ", error);
  }
};
const state = reactive({});
const formJson = ref<any>({
  rowAttrs: {
    gutter: 0,
    justify: "start",
    align: "middle",
  },
  schema: [
    // {
    //   label: "上级分类",
    //   formItemAttrs: {},
    //   attrs: {
    //     placeholder: "请输入",
    //     module: "test",
    //   },
    //   prop: "parentId",
    //   componentName: "ElCascader",
    //   hidden: {
    //     matchPattern: "&&",
    //     type: "select",
    //     dataSelect: [],
    //     value: false,
    //       dataJs: (config, data) => {
    //       return data.parentId === 0;
    //     }
    //   },
    //   colAttrs: {
    //     span: 12,
    //     offset: 0,
    //     push: 0,
    //     pull: 0,
    //   },
    // },
    {
      label: "分类名称",
      formItemAttrs: {},
      attrs: {
        placeholder: "请输入",
        type: "text",
      },
      prop: "categoryName",
      componentName: "ElInput",
   
      colAttrs: {
        span: 12,
        offset: 0,
        push: 0,
        pull: 0,
      },
    },
        {
      label: "显示排序",
      prop: "orderNum",
      colAttrs: {
        span: 12,
      },
      componentName: "ElInputNumber",
      attrs: {
        min: 0,
        placeholder: "请输入显示排序",
      },
      rules: [{ required: true, message: "显示排序不能为空", trigger: 'change' }],
    },
    {
      label: "状态",
      prop: "status",
      colAttrs: {
        span: 12,
      },
      componentName: "selectDict",
      attrs: {
        dictCode: "sys_normal_disable",
        placeholder: "请选择分类状态",
      },
    },
  ],
  model: {
    status: 0,
  },
  formAttrs: {
    "hide-required-asterisk": false,
    "inline-message": false,
    "status-icon": false,
    labelWidth: "100px",
    "scroll-to-error": false,
  },
});
let props: any = defineProps({
  modelValue: {
    type: Boolean,
    defalut: false,
  },
    id: {
    type: String,
    defalut: "",
  },
});
const getInfo = () =>{
    getRecipeCategoryInfo(props.id).then((response: ResponseConfig) => {
    formJson.value.model = response.data;


  });
}
watch(
  () => props.modelValue,
  (val) => {
    dialogVisible.value = val;
    if(props.id&&val){
        getInfo();
        // getDeptTree();
    }else if(!props.id&&val){
      formJson.value.model = {
           status: '0',
      };
    }
  },
  {
    immediate: true,
  }
);
const handleClose = () => {
  emit("update:modelValue", false);
};
watch(
  () => dialogVisible.value,
  (val) => {
    if (!val) {
      handleClose();
    }
  }
);
</script>

<style scoped lang="scss"></style>
